【krapano】コントローラーを付ける

パノラマにコントローラーを付ける方法

【使用するファイル】
パノラマのxmlファイル
krpano Viewer内のbuttonsフォルダのファイル
krpano Viewer>examples>xml-usage>buttons

【準備】
コントローラーを配置したいパノラマのxmlファイルのある場所にbuttonsフォルダをコピーする。

【基本コード】パノラマのxmlファイル
以下のコードをxmlに追加

このコントローラーを使用する場合（buttons.jpg）

<include url="buttons/buttons-jpg-include.xml" />

このコントローラーを使用する場合（buttons.png）

<include url="buttons/buttons-png-include.xml" />

【メモ】
オリジナルのコントローラーを使用したい場合は上記のコントローラーをテンプレートにして

デザインを作成して、buttonsフォルダ内に保存して、ファイル名をbuttons.jpかbuttons.pngにする。

オリジナルのファイル名にする場合はボタン用画像をbuttonsフォルダ内に保存して

（buttons-jpg-include.xml）か（buttons-png-include.xml）のどちらか使用する方の

ファイルを開き、20行目あたりの以下の記述のファイル名部分を変更する。

<style name="button" keep="true" align="bottom" y="10" url="buttons.jpg" blendmode="screen" />

ボタンのサイズが同じであれば、他に変更する場所は無しblendmode=”screen”で黒背景を無くしている。

ブレンドモードの設定についてはここを参照

【オリジナルとはボタンサイズの異なるコントローラーを配置したい】

buttonsフォルダ内のbuttons-jpg-include.xmlまたはbuttons-png-include.xmlどちらか使用する方の

xmlファイルを開く。オリジナルのボタン用画像の名前はbuttons.jpgとして説明。

22〜33行目あたりに記載されている以下のコードを変更する。

オリジナルのbuttons.jpg画像は40×40ピクセル単位で各ボタンが設定されているので設定は40がキーワード。
抜粋したコード

<plugin name="in"       style="button" x="-160" crop="160|0|40|40" onovercrop="160|40|40|40" ondowncrop="160|80|40|40" ondown="set(fov_moveforce,-1);"  onup="set(fov_moveforce,0);" />
<plugin name="out"      style="button" x="-120" crop="200|0|40|40" onovercrop="200|40|40|40" ondowncrop="200|80|40|40" ondown="set(fov_moveforce,+1);"  onup="set(fov_moveforce,0);" />

以下の設定を参考に、オリジナル画像のコントローラーボタンの大きさに合わせた設定をする。

■x=”"の設定　横並びボタンの位置の指定
upボタンを中心にして、upの左側のボタンはx=” “の数字が-40になり、さらに左のボタンは-80になる。

増える。逆にupから右のボタンはx=” “の数字が40になり、さらに右のボタンは80になる。

■crop=”"の設定　ボタン用の素材を全てのボタンを一枚の画像で作成しているので、

■onovercrop=”"の設定　マウスを乗せた時の設定
オリジナル画像では中段の画像。ロールオーバーをさせなければ、設定しなくても良い。

■ondowncrop=”"の設定　マウスをクリックした状態の時の設定
オリジナル画像では下段の画像。ロールオーバーをさせなければ、設定しなくても良い。

【ボタンの種類】
オリジナルのコントローラーの種類は右から以下の通り

拡大（+）/縮小（-）/左回り（←）/右回り（→）/上向き（↑）/下向き（↓）/不明（★）/ポインタの切替（手）/フルスクリーン

■実際問題として不明な★マークとポインタの切替は不要だと思うので削除の方法
22〜33行目あたりに記載されている以下のコードの29〜30行目の以下の記述を削除
削除するコード

<plugin name="hotspots" style="button" x="+80"  crop="240|0|40|40" onovercrop="240|40|40|40" ondowncrop="240|80|40|40" onhover="showtext(Toggle Hotspots, buttonstyle);"     onclick="switch(hotspot.visible);"               />
<plugin name="dragmode" style="button" x="+120" crop="400|0|40|40" onovercrop="400|40|40|40" ondowncrop="400|80|40|40" onhover="showtext(Change Controlmode, buttonstyle);"  onclick="action(dragcursor);"    visible="true"  />
<plugin name="movemode" style="button" x="+120" crop="360|0|40|40" onovercrop="360|40|40|40" ondowncrop="360|80|40|40" onhover="showtext(Change Controlmode, buttonstyle);"  onclick="action(qtvrcursor);"    visible="false" />

ボタンの種類が9種類から7種類に減り歯抜けになる

ボタンの種類が減り、真ん中のボタンが『上向き』から『右回転』になるのでx=”"の設定を変更してボタンの位置を調整する。
name=”right”のボタンが右回転ボタンなのでx=”-40″をx=”0″にする。
左右のボタンのx=”"の設定もそれぞれ数字を変更する。

変更後のコード

<plugin name="in"       style="button" x="-120" crop="160|0|40|40" onovercrop="160|40|40|40" ondowncrop="160|80|40|40" ondown="set(fov_moveforce,-1);"  onup="set(fov_moveforce,0);" />
<plugin name="out"      style="button" x="-80" crop="200|0|40|40" onovercrop="200|40|40|40" ondowncrop="200|80|40|40" ondown="set(fov_moveforce,+1);"  onup="set(fov_moveforce,0);" />
<plugin name="left"     style="button" x="-40"  crop=  "0|0|40|40" onovercrop=  "0|40|40|40" ondowncrop=  "0|80|40|40" ondown="set(hlookat_moveforce,-1);"  onup="set(hlookat_moveforce,0);" />
<plugin name="right"    style="button" x="0"  crop= "40|0|40|40" onovercrop= "40|40|40|40" ondowncrop= "40|80|40|40" ondown="set(hlookat_moveforce,+1);"  onup="set(hlookat_moveforce,0);" />
<plugin name="up"       style="button" x="+40"   crop= "80|0|40|40" onovercrop= "80|40|40|40" ondowncrop= "80|80|40|40" ondown="set(vlookat_moveforce,-1);"  onup="set(vlookat_moveforce,0);" />
<plugin name="down"     style="button" x="+80"  crop="120|0|40|40" onovercrop="120|40|40|40" ondowncrop="120|80|40|40" ondown="set(vlookat_moveforce,+1);"  onup="set(vlookat_moveforce,0);" />
<plugin name="openfs"   style="button" x="+120" crop="280|0|40|40" onovercrop="280|40|40|40" ondowncrop="280|80|40|40" onhover="showtext(Fullscreen, buttonstyle);"          onclick="set(fullscreen,true);"  visible="true"  />
<plugin name="closefs"  style="button" x="+120" crop="320|0|40|40" onovercrop="320|40|40|40" ondowncrop="320|80|40|40" onhover="showtext(Exit Fullscreen,buttonstyle);"      onclick="set(fullscreen,false);" visible="false" />

きちんと整列されました

コントローラーの並び順を変更したい
x=”"の数字を調整すれば並び順は変更可能。
+-を左から右に移動

<plugin name="in"       style="button" x="+120" crop="160|0|40|40" onovercrop="160|40|40|40" ondowncrop="160|80|40|40" ondown="set(fov_moveforce,-1);"  onup="set(fov_moveforce,0);" />
<plugin name="out"      style="button" x="+80" crop="200|0|40|40" onovercrop="200|40|40|40" ondowncrop="200|80|40|40" ondown="set(fov_moveforce,+1);"  onup="set(fov_moveforce,0);" />
<plugin name="left"     style="button" x="-120"  crop=  "0|0|40|40" onovercrop=  "0|40|40|40" ondowncrop=  "0|80|40|40" ondown="set(hlookat_moveforce,-1);"  onup="set(hlookat_moveforce,0);" />
<plugin name="right"    style="button" x="-80"  crop= "40|0|40|40" onovercrop= "40|40|40|40" ondowncrop= "40|80|40|40" ondown="set(hlookat_moveforce,+1);"  onup="set(hlookat_moveforce,0);" />
<plugin name="up"       style="button" x="-40"   crop= "80|0|40|40" onovercrop= "80|40|40|40" ondowncrop= "80|80|40|40" ondown="set(vlookat_moveforce,-1);"  onup="set(vlookat_moveforce,0);" />
<plugin name="down"     style="button" x="0"  crop="120|0|40|40" onovercrop="120|40|40|40" ondowncrop="120|80|40|40" ondown="set(vlookat_moveforce,+1);"  onup="set(vlookat_moveforce,0);" />
<plugin name="openfs"   style="button" x="+40" crop="280|0|40|40" onovercrop="280|40|40|40" ondowncrop="280|80|40|40" onhover="showtext(Fullscreen, buttonstyle);"          onclick="set(fullscreen,true);"  visible="true"  />
<plugin name="closefs"  style="button" x="+40" crop="320|0|40|40" onovercrop="320|40|40|40" ondowncrop="320|80|40|40" onhover="showtext(Exit Fullscreen,buttonstyle);"      onclick="set(fullscreen,false);" visible="false" />